var chartDom4 = document.getElementById("echarts4");
var myChart4 = echarts.init(chartDom4);
var series = [];
var door = [];
var time = [];
var option4;

function ajax4() {
  $.ajax({
    url: "/large-screen/accessControlDevice/selectFourteenDayInAndOutByDoor",
    type: "GET",
    crossDomain: true,
    dataType: "json",
    async: false,
    success: function (res) {
      for (let i = 0; i < res.data.length; i++) {
        series.unshift(res.data[i]);
      }
      // console.log(series);
      for (let i = 0; i < series.length; i++) {
        time.push(series[i].time.substring(5, series[i].time.length));
      }
      door = series[0].doorPersonList.map((item) => {
        return item.doorName;
      });
    },
    error: function (xhr, status) {
      console.log(status);
    },
  });
  option4 = {
    // color: ['#D53A35', '#E98F6F', '#6AB0B8', '#334B5C'],
    tooltip: {
      trigger: "axis",
      backgroundColor: "rgba(50,50,50,0)", // tooltip默认背景为白色，手动置为透明
      borderWidth: 0,
      /* textStyle: {
        color: "#fff",
        fontSize: 13,
      }, */
      formatter: function (params) {
        let html = "";
        html += `<div style="color: #fff;font-size: 16px;width:400px;padding: 16px;
                  background: linear-gradient(180deg, rgba(255,255,255,0.44) 0%, rgba(255,255,255,0.1) 22%, rgba(255,255,255,0) 46%, rgba(255,255,255,0.28) 77%, rgba(255,255,255,0.4) 100%);
                  border-radius: 10px;border: 1px solid;border-image: radial-gradient(circle, rgba(111, 185, 242, 0.86), rgba(0, 0, 0, 0.2)) 1 1;
                  backdrop-filter: blur(10px);">
                    <div style="margin-bottom: 16px;">${params[0].name}</div>
                    <div style="display: flex;justify-content: space-between;flex-wrap: wrap;">
                      ${params
                        .map((item) => {
                          let str = "";
                          str += `<div style="margin-bottom: 12px;text-align: left;width: 48%;">
                                  <span style="font-size: 14px;">${item.seriesName}</span>
                                  <span style="margin-left: 16px;color: ${item.color};float: right;">${item.value}人</span>
                                </div>`;
                          return str;
                        })
                        .join("")}
                    </div>
                  </div>`;
        return html;
      },
    },
    grid: {
      top: "30%",
      bottom: "5%",
      left: "2%",
      right: "4%",
      containLabel: true,
    },
    legend: {
      type: "plain",
      icon: "rect",
      // bottom: '18%',
      top: "2%",
      left: "right",
      itemWidth: 14,
      itemHeight: 4,
      itemGap: 11,
      // orient:'vertical',
      symbolKeepAspect: false,
      textStyle: {
        color: "#fff",
      },
      data: door,
    },
    xAxis: {
      type: "category",
      //name: '日期',
      boundaryGap: false,
      axisLine: {
        show: false,
        lineStyle: {
          color: "#AAA",
        },
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        color: "#AAAAAA",
      },
      data: time,
    },
    yAxis: {
      name: "人",
      type: "value",
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        color: "#AAA",
      },
      splitLine: {
        lineStyle: {
          type: "dotted",
          color: "#AAA",
        },
      },
    },
    series: [
      {
        name: door[0],
        type: "line",
        // stack: "总量",
        data: series.map((item) => {
          return item.doorPersonList[0].count;
        }),
        // 设置拐点 小圆点
        symbol: "circle",
        // 拐点大小
        symbolSize: 8,
        // 设置拐点颜色以及边框
        itemStyle: {
          color: "#FFBAE3",
          borderColor: "rgba(221, 220, 107, .1)",
          borderWidth: 12,
        },
        // 开始不显示拐点， 鼠标经过显示
        showSymbol: false,
      },
      {
        name: door[1],
        type: "line",
        // stack: "总量",
        data: series.map((item) => {
          return item.doorPersonList[1].count;
        }),
        // 设置拐点 小圆点
        symbol: "circle",
        // 拐点大小
        symbolSize: 8,
        // 设置拐点颜色以及边框
        itemStyle: {
          color: "#C3FFFF",
          borderColor: "rgba(221, 220, 107, .1)",
          borderWidth: 12,
        },
        // 开始不显示拐点， 鼠标经过显示
        showSymbol: false,
      },
      {
        name: door[2],
        type: "line",
        //smooth:true,
        // stack: "总量",
        data: series.map((item) => {
          return item.doorPersonList[2].count;
        }),
        // 设置拐点 小圆点
        symbol: "circle",
        // 拐点大小
        symbolSize: 8,
        // 设置拐点颜色以及边框
        itemStyle: {
          color: "#D1F6BD",
          borderColor: "rgba(221, 220, 107, .1)",
          borderWidth: 12,
        },
        // 开始不显示拐点， 鼠标经过显示
        showSymbol: false,
      },
      {
        name: door[3],
        type: "line",
        //smooth:true,
        // stack: "总量",
        data: series.map((item) => {
          return item.doorPersonList[3].count;
        }),
        // 设置拐点 小圆点
        symbol: "circle",
        // 拐点大小
        symbolSize: 8,
        // 设置拐点颜色以及边框
        itemStyle: {
          color: "#CC336D",
          borderColor: "rgba(221, 220, 107, .1)",
          borderWidth: 12,
        },
        // 开始不显示拐点， 鼠标经过显示
        showSymbol: false,
      },
      {
        name: door[4],
        type: "line",
        //smooth:true,
        // stack: "总量",
        data: series.map((item) => {
          return item.doorPersonList[4].count;
        }),
        // 设置拐点 小圆点
        symbol: "circle",
        // 拐点大小
        symbolSize: 8,
        // 设置拐点颜色以及边框
        itemStyle: {
          color: "#9A9A9A",
          borderColor: "rgba(221, 220, 107, .1)",
          borderWidth: 12,
        },
        // 开始不显示拐点， 鼠标经过显示
        showSymbol: false,
      },
      {
        name: door[5],
        type: "line",
        //smooth:true,
        // stack: "总量",
        data: series.map((item) => {
          return item.doorPersonList[5].count;
        }),
        // 设置拐点 小圆点
        symbol: "circle",
        // 拐点大小
        symbolSize: 8,
        // 设置拐点颜色以及边框
        itemStyle: {
          color: "#D3E1FF",
          borderColor: "rgba(221, 220, 107, .1)",
          borderWidth: 12,
        },
        // 开始不显示拐点， 鼠标经过显示
        showSymbol: false,
      },
      {
        name: door[6],
        type: "line",
        //smooth:true,
        // stack: "总量",
        data: series.map((item) => {
          return item.doorPersonList[6].count;
        }),
        // 设置拐点 小圆点
        symbol: "circle",
        // 拐点大小
        symbolSize: 8,
        // 设置拐点颜色以及边框
        itemStyle: {
          color: "#FF6464",
          borderColor: "rgba(221, 220, 107, .1)",
          borderWidth: 12,
        },
        // 开始不显示拐点， 鼠标经过显示
        showSymbol: false,
      },
      {
        name: door[7],
        type: "line",
        //smooth:true,
        // stack: "总量",
        data: series.map((item) => {
          return item.doorPersonList[7].count;
        }),
        // 设置拐点 小圆点
        symbol: "circle",
        // 拐点大小
        symbolSize: 8,
        // 设置拐点颜色以及边框
        itemStyle: {
          color: "#C0CC33",
          borderColor: "rgba(221, 220, 107, .1)",
          borderWidth: 12,
        },
        // 开始不显示拐点， 鼠标经过显示
        showSymbol: false,
      },
      {
        name: door[8],
        type: "line",
        //smooth:true,
        // stack: "总量",
        data: series.map((item) => {
          return item.doorPersonList[8].count;
        }),
        // 设置拐点 小圆点
        symbol: "circle",
        // 拐点大小
        symbolSize: 8,
        // 设置拐点颜色以及边框
        itemStyle: {
          color: "#CC3333",
          borderColor: "rgba(221, 220, 107, .1)",
          borderWidth: 12,
        },
        // 开始不显示拐点， 鼠标经过显示
        showSymbol: false,
      },
      {
        name: door[9],
        type: "line",
        //smooth:true,
        // stack: "总量",
        data: series.map((item) => {
          return item.doorPersonList[9].count;
        }),
        // 设置拐点 小圆点
        symbol: "circle",
        // 拐点大小
        symbolSize: 8,
        // 设置拐点颜色以及边框
        itemStyle: {
          color: "#A011F3",
          borderColor: "rgba(221, 220, 107, .1)",
          borderWidth: 12,
        },
        // 开始不显示拐点， 鼠标经过显示
        showSymbol: false,
      },
      {
        name: door[10],
        type: "line",
        //smooth:true,
        // stack: "总量",
        data: series.map((item) => {
          return item.doorPersonList[10].count;
        }),
        // 设置拐点 小圆点
        symbol: "circle",
        // 拐点大小
        symbolSize: 8,
        // 设置拐点颜色以及边框
        itemStyle: {
          color: "#1411F3",
          borderColor: "rgba(221, 220, 107, .1)",
          borderWidth: 12,
        },
        // 开始不显示拐点， 鼠标经过显示
        showSymbol: false,
      },
      {
        name: door[11],
        type: "line",
        //smooth:true,
        // stack: "总量",
        data: series.map((item) => {
          return item.doorPersonList[11].count;
        }),
        // 设置拐点 小圆点
        symbol: "circle",
        // 拐点大小
        symbolSize: 8,
        // 设置拐点颜色以及边框
        itemStyle: {
          color: "#FF0000",
          borderColor: "rgba(221, 220, 107, .1)",
          borderWidth: 12,
        },
        // 开始不显示拐点， 鼠标经过显示
        showSymbol: false,
      },
      {
        name: door[12],
        type: "line",
        //smooth:true,
        // stack: "总量",
        data: series.map((item) => {
          return item.doorPersonList[12].count;
        }),
        // 设置拐点 小圆点
        symbol: "circle",
        // 拐点大小
        symbolSize: 8,
        // 设置拐点颜色以及边框
        itemStyle: {
          color: "#89FF58",
          borderColor: "rgba(221, 220, 107, .1)",
          borderWidth: 12,
        },
        // 开始不显示拐点， 鼠标经过显示
        showSymbol: false,
      },
      {
        name: door[13],
        type: "line",
        //smooth:true,
        // stack: "总量",
        data: series.map((item) => {
          return item.doorPersonList[13].count;
        }),
        // 设置拐点 小圆点
        symbol: "circle",
        // 拐点大小
        symbolSize: 8,
        // 设置拐点颜色以及边框
        itemStyle: {
          color: "#33CCCC",
          borderColor: "rgba(221, 220, 107, .1)",
          borderWidth: 12,
        },
        // 开始不显示拐点， 鼠标经过显示
        showSymbol: false,
      },
      {
        name: door[14],
        type: "line",
        //smooth:true,
        // stack: "总量",
        data: series.map((item) => {
          return item.doorPersonList[14].count;
        }),
        // 设置拐点 小圆点
        symbol: "circle",
        // 拐点大小
        symbolSize: 8,
        // 设置拐点颜色以及边框
        itemStyle: {
          color: "#A0D0FF",
          borderColor: "rgba(221, 220, 107, .1)",
          borderWidth: 12,
        },
        // 开始不显示拐点， 鼠标经过显示
        showSymbol: false,
      },
      {
        name: door[15],
        type: "line",
        //smooth:true,
        // stack: "总量",
        data: series.map((item) => {
          return item.doorPersonList[15].count;
        }),
        // 设置拐点 小圆点
        symbol: "circle",
        // 拐点大小
        symbolSize: 8,
        // 设置拐点颜色以及边框
        itemStyle: {
          color: "#FF7542",
          borderColor: "rgba(221, 220, 107, .1)",
          borderWidth: 12,
        },
        // 开始不显示拐点， 鼠标经过显示
        showSymbol: false,
      },
      {
        name: door[16],
        type: "line",
        //smooth:true,
        // stack: "总量",
        data: series.map((item) => {
          return item.doorPersonList[16].count;
        }),
        // 设置拐点 小圆点
        symbol: "circle",
        // 拐点大小
        symbolSize: 8,
        // 设置拐点颜色以及边框
        itemStyle: {
          color: "#1180F3",
          borderColor: "rgba(221, 220, 107, .1)",
          borderWidth: 12,
        },
        // 开始不显示拐点， 鼠标经过显示
        showSymbol: false,
      },
      {
        name: door[17],
        type: "line",
        //smooth:true,
        // stack: "总量",
        data: series.map((item) => {
          return item.doorPersonList[17].count;
        }),
        // 设置拐点 小圆点
        symbol: "circle",
        // 拐点大小
        symbolSize: 8,
        // 设置拐点颜色以及边框
        itemStyle: {
          color: "#0184d5",
          borderColor: "rgba(221, 220, 107, .1)",
          borderWidth: 12,
        },
        // 开始不显示拐点， 鼠标经过显示
        showSymbol: false,
      },
    ],
  };
  option4 && myChart4.setOption(option4);
}

ajax4();

setInterval(() => {
  series = [];
  time = [];
  ajax4();
}, 600000);
